<template>
  <div class="author">
    <!------------------------------------------------------顶部导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="container AuthorHeader">
        <div class="MyUser">
          <div class="userHaderBox">
            <!-- 头像 -->
            <van-image round src="https://img.yzcdn.cn/vant/cat.jpeg">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <!-- 用户 -->
            <div class="userNameBox">
              <!-- 用户名称 -->
              <p class="userName">玩青蛙的猫</p>
              <!-- 身份勋章 -->
              <div class="userIcon">
                认证:
                <van-icon name="shop" />
                <van-icon name="gem" />
                <van-icon name="award" />
                <van-icon name="manager" />
                <van-icon name="card" />
              </div>
            </div>
            <!-- 积分标识 -->
            <!-- <div class="integralBox">
                  <van-icon name="diamond" />
                  <span>积分：12312</span>
            </div>-->
          </div>
          <!-- 收藏 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <p class="UserListNumb">{{ count }}</p>
              <p class="UserHeaderName">作品</p>
            </van-grid-item>
            <van-grid-item>
              <p class="UserListNumb">1</p>
              <p class="UserHeaderName">粉丝</p>
            </van-grid-item>
            <van-grid-item>
              <p class="UserListNumb">
                <van-icon name="certificate" />
              </p>
              <p class="UserHeaderName">已关注</p>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="describe">
        <van-panel
        title="个人简介"
        desc="范治斌:男，汉族，1972年12月生于内蒙古呼和浩特市。1988年
毕业于呼和浩特市第八中学，1991年 毕业于呼和浩特市第一中
学，1995年毕业于南开大学东方艺术系中国画专业，师从范曾，
获学士学位; 2002年毕业于鲁迅美术学院中国人物画工作室，师
从赵奇，获硕士学"
      ></van-panel>
      </div>
      <div class="body">
        <!-- Body内容 -->
      <van-list v-model="BodyListloading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="container">
          <van-row gutter="10">
            <van-col class="GoodsBox" span="12" v-for="(item,key) in BodyListData" :key="key">
              <!-- 图片 -->
              <van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <p class="GoodsName">郑枫秋《鸟鸣秋山幽》</p>
              <!-- <p class="GoodsPrice">￥2323.23</p> -->
            </van-col>
          </van-row>
        </div>
      </van-list>
      </div>
    </van-pull-refresh>
    <!-- 底部导航 -->
    <Tabbar :active="3"></Tabbar>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'

export default {
  name: 'my',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '作者',
      count: 0,
      isLoading: false,
      BodyListData: [],
      BodyListloading: false,
      finished: false
    }
  },

  computed: {},

  watch: {},

  created () {},

  mounted () {},

  destroyed () {},

  methods: {
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 500)
    },
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.BodyListData.push(this.BodyListData.length + 1)
        }
        // 加载状态结束
        this.BodyListloading = false

        // 数据全部加载完成
        // if (this.BodyListData.length >= 40) {
        //   this.finished = true
        // }
      }, 500)
    }
  }
}
</script>

<style lang="less" >
/* ... */
.container {
  margin: 0 15px;
}
.author {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    height: calc(100% - 50px);
    overflow-y: auto;
    .AuthorHeader {
      background-color: #ffffff;
      margin-top: 10px;
      border-radius: 4px;
      .MyUser {
        width: 100%;
        border-radius: 2px;
        background-color: #ffffff;
        box-shadow: 0 2px 2px 2px rgba(216, 216, 216, 0.2);
        .userHaderBox {
          padding: 23.5px 22px 10px;
          position: relative;
          .van-image {
            width: 44px;
            height: 44px;
            position: static;
            vertical-align: top;
          }
          .userNameBox {
            vertical-align: top;
            display: inline-block;
            margin-left: 10px;
            .userName {
              margin: 0;
              margin-bottom: 4px;
              font-size: 16px;
              font-weight: bold;
              color: #333333;
            }
            .userIcon {
              font-size: 14px;
              color: #ffa300;
              i {
                margin: 0 2px;
                vertical-align: middle;
              }
              .icoClick {
                vertical-align: middle;
                font-size: 10px;
                color: #ffbb00;
                margin-left: 6px;
                i {
                  font-size: 10px;
                  vertical-align: middle;
                }
              }
            }
          }
          .integralBox {
            position: absolute;
            // height: 21px;
            // width: 119px;
            font-size: 14px;
            line-height: 21px;
            right: 0;
            top: 30px;
            color: #fff;
            background-color: #ff7c00;
            border-bottom-left-radius: 21px;
            border-top-left-radius: 21px;
            i {
              vertical-align: middle;
              margin-left: 10px;
              line-height: 21px;
            }
            span {
              vertical-align: middle;
              font-size: 12px;
              line-height: 21px;
              margin: 0 10px;
            }
          }
        }
        .van-grid {
          .van-grid-item {
            .van-grid-item__content {
              padding: 0px 6px 12px;
              p {
                margin: 0;
              }
              .UserListNumb {
                font-size: 16px;
                color: #333333;
              }
              .UserHeaderName {
                font-size: 14px;
                color: #666666;
              }
            }
          }
        }
      }
    }
    .describe{
      margin-top: 10px;
      .van-cell__label{
        text-indent: 24px;
      }
    }
  }
  .body{
    margin-top: 10px;
    .GoodsBox {
      margin-bottom:10px;
      .van-image{
        img{
          font-size: 0;
        }
      }
      .GoodsName {
        font-size: 14px;
        color: #333333;
        margin: 0;
      }
      .GoodsPrice {
        font-size: 14px;
        color: #ff7c00;
        margin: 0;
      }
    }
  }
}
</style>
